<template>
    <div class="article-lists">
        <el-card class="!border-none" shadow="never">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
				<el-tab-pane label="待处理" :name="1"></el-tab-pane>
				<el-tab-pane label="已处理" :name="2"></el-tab-pane>
			</el-tabs>
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
                <el-table-column label="序号" type="index" :index="indexAdd" min-width="90" />
                <el-table-column label="姓名" prop="user_name" min-width="110" />
                <el-table-column label="账号" prop="account" min-width="140" />
                <el-table-column label="产品类型" prop="type_name" min-width="140" />
                <el-table-column label="产品名称" prop="name" min-width="200" />
                <el-table-column label="申请时间" prop="create_time" min-width="190" />
                <el-table-column label="是否参与补贴" prop="has_subsidy" min-width="190">
                    <template #default="{ row }">
                        <span v-if="row.has_subsidy == 0">否</span>
                        <span v-else>是</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" fixed="right">
                    <template v-if="activeName == 1" #default="{ row }">
                        <el-button v-perms="['server.server/saveGood']" type="primary" link>
                            <router-link :to="{ path: getRoutePath('server.server/saveGood'), query: { server_id: row.shop_id, id: row.id, type:'pass' } }" > 审核通过 </router-link>
                        </el-button>
                        <el-button v-perms="['server.server/rejectUser']" type="danger" link  @click="handleCheck(row)">审核驳回</el-button>
                    </template>
                    <template v-if="activeName == 2" #default="{ row }">
                        <el-button v-if="row.status == 0 || row.status == 2" v-perms="['server.server/changeGoodStatus']" type="warning" link @click="handleUp(row.id)">上架</el-button>
                        <el-button v-if="row.status == 1" v-perms="['server.server/changeGoodStatus']" type="danger" link @click="handleDown(row.id)">下架</el-button>
                        <el-button v-perms="['server.server/goodInfo']" type="primary" link @click="handleInfo(row)">查看详情</el-button>
                        <!-- <el-link v-if="row.status == 4" type="danger" :underline="false">已驳回</el-link> -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <check_demand v-model:show="checkState.show" :value="checkState.value" @confirm="handleConfirmCheck"></check_demand>
    </div>
</template>
<script lang="ts" setup name="userList">
    import { goodsList, changeGoodStatus } from '@/api/service';
    import { usePaging } from '@/hooks/usePaging';
    import {getRoutePath} from '@/router'
    import check_demand from './check_demand.vue'
    import feedback from '@/utils/feedback';
    const router = useRouter()

    const queryParams = reactive({
        server_id: 0,
		is_auth: 1,
	})
    //新增切换
    const activeName = ref(1)
    const handleClick = (val: any) => {
        console.log(val)
        queryParams.is_auth = val == 1 ? 1: 2; // is_auth 0全部 1待审核 2已处理
        getLists()
    }

    const checkState = reactive({
		show: false,
		value: '',
		status: ''
	})
    // 审核驳回
    const handleCheck = (row:any) => {
        checkState.show = true
		checkState.value = row.id
    }
    const handleConfirmCheck = async (value : any) => {
		console.log(value)
		await changeGoodStatus({
            id: value.id,
            status: 4,
            notice: value.reason
        })
		checkState.show = false
		getLists()
	}

    // 切页序号变化
    const indexAdd = (index: number) => {
        const page = pager.page // 当前页码
        const pagesize = pager.size // 每页条数
        return index + 1 + (page - 1) * pagesize
    }
	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: goodsList,
		params: queryParams
	})
    getLists()

    const handleUp = async (id:number) => {
        await feedback.confirm('是否确认完成此操作', '商品上架')
        await changeGoodStatus({
            id,
            status: 1
        })
        getLists()
    }
    const handleDown = async (id:number) => {
        await feedback.confirm('是否确认完成此操作', '商品下架')
        await changeGoodStatus({
            id,
            status: 2
        })
        getLists()
    }
    const handleInfo = (row:any) => {
        router.push({ path: getRoutePath('server.server/saveGood'), query: { server_id: row.shop_id, id: row.id } });// server_id 服务商id  id 商品的id
    }
</script>